<template>
  <div class="default-view">
    <je-editor-code
      ref="editor"
      v-model:value="eventValue"
      v-model:language="language"
      height="100%"
      width="100%"
      :editor-options="editorOptions"
      @save="onSave"
      @init="onInit"
      @change="onChange"
    />
  </div>
</template>

<script>
  import { defineComponent, ref, reactive, toRefs, watch } from 'vue';
  import { EditorCode } from '@jecloud/ui';

  export default defineComponent({
    name: 'DefaultView',
    components: {
      JeEditorCode: EditorCode,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      selectedColumn: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changData', 'doSave'],
    setup(props, { emit }) {
      const editor = ref();
      const eventValue = ref();
      const defauleData = reactive({
        language: 'javascript',
        editorOptions: { height: '100%', width: '100%' },
      });

      //
      watch(
        () => props.selectedColumn,
        () => {
          eventValue.value = props.selectedColumn.func || props.selectedColumn.defaultValue || '';
        },
        { deep: true, immediate: true },
      );

      const onSave = function (value) {
        emit('doSave');
      };
      const onInit = function ($editor) {
        //  console.log('初始化：', $editor, editor.value.getEditor());
      };
      const onChange = function (value, evt) {
        emit('changData', props.selectedColumn.code, value);
      };
      return { ...toRefs(defauleData), onSave, onInit, onChange, editor, eventValue };
    },
  });
</script>

<style lang="less" scoped>
  .default-view {
    width: 100%;
    height: 100%;
  }
</style>
<style lang="less"></style>
